
<style type="text/css">
.single-content{
    overflow:auto;
    overflow-x: hidden;
    
}
.single-content::-webkit-scrollbar {
      /*滚动条宽*/
      width: 4px;
    }
</style>
<div style="display:flex;dispaly:-webkit-flex;flex-wrap: wrap;flex-direction:row;">
  
  @foreach($cabinetsData as $oneCabinetData)

  <div class="single-card" onclick="location='{{ $oneCabinetData['detail'] }}'" style="box-shadow:1px 7px 11px #cdd2d7;height:21rem;width:24%;margin:0.5rem;">
    <div>
        <div class="single-title" style="color:#FFFFFF;background:#3DA1E3; font-size: 20px;height:50px;line-height:50px;display:flex;justify-content:space-between;">
          <div style="font-size:24px;margin-left:1rem;color:#FFE328;">{{ $oneCabinetData['name'] }} </div><div style="font-size:11px;margin-right:1rem;" id="{{ $oneCabinetData['id'] }}-time" >{{ $oneCabinetData['time'] }}</div>
        </div>
        <div id="points-{{ $oneCabinetData['id'] }}" name="points" class="single-content" style="height:17rem;">
            
            @foreach($oneCabinetData['newestData'] as $onePointAlias => $onePointValue)
            @if(strpos($onePointAlias, 'live') === false)
                <div style="display:flex;justify-content:space-between;height: 1.5rem;margin-top:0.2rem;float:left;width:50%;">
                    <div style="font-size: 7px;color:#2F2F2F;margin-left:1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;">
                        {{ isset($oneCabinetData['points'][$onePointAlias]) ? $oneCabinetData['points'][$onePointAlias]['name'] : $onePointAlias }}
                    </div>
                    <div style="font-size: 11px; color:#3DA1E3;height:311px;margin-right:1rem;width: 50px;float: right;">
                        <span id="{{ $oneCabinetData['id'] }}-{{ $onePointAlias }}">{{ (isset($oneCabinetData['points'][$onePointAlias]['decimal']) && $oneCabinetData['points'][$onePointAlias]['decimal']) ? round($onePointValue / pow(10, $oneCabinetData['points'][$onePointAlias]['decimal']), 3) : $onePointValue }}</span>
                        <span>{{ (isset($oneCabinetData['points'][$onePointAlias]['units']) && $oneCabinetData['points'][$onePointAlias]['units']) ? $oneCabinetData['points'][$onePointAlias]['units'] : '' }}</span>
                    </div>
                </div>
            @else
                <div id="live-{{ $oneCabinetData['id'] }}-{{ $onePointAlias }}" style="display:flex;justify-content:space-between;height: 1.5rem;margin-top:0.2rem;float:left;width:50%;">
                    <div style="font-size: 7px;color:#2F2F2F;margin-left:1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;">
                        <span id="{{ $oneCabinetData['id'] }}-{{ $onePointAlias }}">
                            {{ $onePointValue }}
                        </span>
                    </div>
                </div>
            @endif

            @endforeach
  
        </div>
    </div>
  </div>

  @endforeach
</div>

<script type="text/javascript">
    Dcat.ready(function () {
        setTimeout(getCabinetRealtimeDataByBox, 1000*{{ $autoRefresh }});
        function getCabinetRealtimeDataByBox() {
            if (window.parent.location.href.indexOf('cabinet-realtime') < 0) {
              return;
            }

            setTimeout(getCabinetRealtimeDataByBox, 1000*{{ $autoRefresh }});

            let url = "{{ URL::asset('admin/getCabinetRealtimeDataByBox') }}";
            let data = {
                _token: '{{ csrf_token() }}',
                boxId: {{ $boxId }}
            }
            $.ajax({
                type : "POST",
                url : url,
                data : data,
                success : function(result) {
                    // console.log(result)
                    if (result.code == 1) {
                        for(let i=0; i< result.data.length; i++){
                            $("#"+result.data[i].id+"-time").html(result.data[i].time);

                            const aliases = Object.keys(result.data[i].newestData);

                            var liveObj = $("div[id^='live-"+result.data[i].id+"']");
                            if (liveObj.length > 0) {
                                liveObj.each(function(index, obj){
                                    if ($.inArray( obj.id.split("-")[2], aliases ) === -1) {
                                        obj.remove();
                                    }
                                })
                            }

                            for(let j=0; j<aliases.length; j++){
                                let pointElement = $("#"+result.data[i].id+"-"+aliases[j]);
                                if (pointElement.length > 0) {
                                    // console.log('11111');
                                    // console.log(aliases[j]);
                                } else {
                                    var el = $('<div id="live-'+result.data[i].id+'-'+aliases[j]+'" style="display:flex;justify-content:space-between;height: 1.5rem;margin-top:0.2rem;float:left;width:50%;"><div style="font-size: 7px;color:#2F2F2F;margin-left:1rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;width: 100%;"><span id="'+result.data[i].id+'-'+aliases[j]+'"></span><\/div><\/div>');

                                    el.appendTo($("#points-"+result.data[i].id));

                                    console.log(aliases[j]);
                                }

                                $("#"+result.data[i].id+"-"+aliases[j]).html(result.data[i].newestData[aliases[j]]);
                            }
                        }
                    } else {
                        console.log(result.msg)
                    }
                },
                //请求失败，包含具体的错误信息
                error : function(e){
                    layer.close(e);
                    console.log(e.status);
                    console.log(e.responseText);
                }
            });
        }

    });
</script>